<script setup lang="ts">
import type { Repo } from '@/api'

defineProps<{
  visible: boolean
  repoInfo: Repo
}>()

const emits = defineEmits<{
  (e: 'update:visible', status: boolean): void
}>()
</script>

<template>
  <a-modal
    :title="$t('vul.viewRepo')"
    :open="visible"
    :footer="null"
    destroy-on-close
    @cancel="emits('update:visible', false)"
  >
    <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
      <a-form-item :label="$t('vul.repo.repoName')">
        {{ repoInfo.repo_name }}
      </a-form-item>
      <a-form-item :label="$t('vul.repo.repoContent')">
        <div class="repo-content">
          {{ repoInfo.repo_data }}
        </div>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<style scoped>
.repo-content {
  white-space: pre-wrap;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 4px 6px;
  max-height: 300px;
  overflow-y: auto;
}
</style>
